<template>
  <view class="classLayout pageBg">
    <customNavBar title="分类" />
    <classifySkeleton v-if="isLoading" />
    <view class="classify" v-else>
      <themeItem v-for="item in classifyList" :key="item._id" :item="item" />
    </view>
  </view>
</template>

<script setup>
import themeItem from "../../components/theme_item/theme_item.vue";
// 引入我们的自定义导航栏组件
import customNavBar from "../../components/customNavBar/customNavBar.vue";
import { getClassifyListAPI } from "@/apis/apis.js";
import { onLoad, onShareAppMessage, onShareTimeline } from "@dcloudio/uni-app";
import { ref } from "vue";
import classifySkeleton from "./components/classifySkeleton.vue";

// 获取分类数据
const classifyList = ref([]);
const classifyListFn = async () => {
  // console.log("我触发了");

  const res = await getClassifyListAPI({
    pageSize: 15,
  });
  classifyList.value = res.data;
};
const isLoading = ref(false);
onLoad(async () => {
  isLoading.value = true;
  await classifyListFn();
  isLoading.value = false;
});

//分享给好友
onShareAppMessage((e) => {
  return {
    title: "咸虾米壁纸，好看的手机壁纸",
    path: "/pages/classify/index",
  };
});

//分享朋友圈
onShareTimeline(() => {
  return {
    title: "咸虾米壁纸，好看的手机壁纸",
  };
});
</script>

<style scoped>
.classify {
  padding: 30rpx;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15rpx;
}
</style>
